import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import Banner from './banner';
import Recommended from './recommended';
import Latest from './latest';
import Footer from './footer';

import * as homeAction from './HomeAction';

@connect(null, buildActionDispatcher)
export default class HomeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { homeAction } = this.props;
    homeAction.getFeaturedWorkList().then((data) => {
      this.setState({
        recommendedWorkList: data.assetList,
      });
    });
    homeAction.getLatestWorkList().then((data) => {
      this.setState({
        latestWorkList: data.assetList,
      });
    });
  }

  render() {
    return (
      <div>
        <Banner />
        <div id="body-content">
          <Recommended workList={this.state.recommendedWorkList} />
          <Latest workList={this.state.latestWorkList} />
        </div>
        <Footer />
      </div>
    );
  }

  static get propTypes() {
    return {
      homeAction: PropTypes.any
    }
  }
}

function buildActionDispatcher(dispatch) {
  return {
    homeAction: bindActionCreators(homeAction, dispatch),
  };
}
